<nz-card [nzTitle]="l('ChangePassword')">
    <form nz-form #resetPasswordForm="ngForm" method="post" novalidate (ngSubmit)="save()" role="form">

        <nz-alert class="mb-md" nzType="info" nzCloseable [nzMessage]="l('PleaseEnterYourNewPassword')" nzShowIcon>
        </nz-alert>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="passwordValidationTpl" nzHasFeedback>
                <input nz-input type="password" name="Password" [(ngModel)]="model.password" #Password="ngModel"
                    placeholder="{{'Password' | localize}}" validateEqual="PasswordRepeat" reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit"
                    [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                    [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                    required>
                <ng-template #passwordValidationTpl let-control>
                    <ul *ngIf="control.errors">
                        <li [hidden]="!control.errors.required">{{"ThisFieldIsRequired" | localize}}</li>
                        <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    </ul>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="passwordRepeatValidationTpl" nzHasFeedback>
                <input nz-input type="password" name="PasswordRepeat" [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel"
                    placeholder="{{'PasswordRepeat' | localize}}" validateEqual="Password" reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit"
                    [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                    [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                    required>
                <ng-template #passwordRepeatValidationTpl let-control>
                    <ul *ngIf="control.errors">
                        <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                        <li [hidden]="control.valid">{{"PasswordsDontMatch" | localize}}</li>
                    </ul>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row nzGutter="8">
            <nz-col nzSm="12">
                <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="saving" [disabled]="!resetPasswordForm.form.valid || saving"
                    nzBlock>
                    {{"Submit" | localize}}
                </button>
            </nz-col>
            <nz-col nzSm="12">
                <button nz-button nzType="default" nzSize="large" type="button" [disabled]="saving" routerLink="/account/login"
                    nzBlock>{{"Back" | localize}}</button>
            </nz-col>
        </nz-form-item>
    </form>
</nz-card>